<template>
  <div class="member-benefits-container">
   <div v-if="!iscjh">
     <div class="header">
       <div class="header-con">
         <div class="header-left">
           <img src="https://img.wifenxiao.com/h5-wfx/images/user/memberBenifits/header_icon.png" />
         </div>
         <div class="header-right">
           <p class="level">{{nickname}}</p>
           <p class="member-id">用户ID：{{pid}}</p>
          <p class="member-id" v-if="protection_remain_days">{{protection_remain_days}}到期</p>
         </div>
         <span class="member-type">{{rank_name}}</span>
       </div>
       <div class="recharge-rank">
          <div v-if="next_rank_name_sale">
            <p>您再充值<span class="num">{{mSymbol.name}}{{amount}}</span>可升级为<i>{{next_rank_name_sale}}</i></p>
            <a href="javascript:;"
                @click="Jump('rechargeList')">
              立即充值
              <!-- <svg-icon icon-class="icon_linkto"></svg-icon> -->
              <!-- TODO svg修改 -->
              <i class="icon-right"></i>
            </a>
         </div>
          <div v-if="protection_remain_days">
            <div class="relegation"><span class="total-relegation">{{protection_total_amount}}</span><span class="mgr10">元</span>距离{{rank_name}}保级还需消费{{protection_remain_money}}元</div>
            <div class="progress-relegation">
              <div class="progress-keep">
                <div class="progress-bar" :style="{width: percentage+'%'}"></div>
              </div>
            </div>
          </div>
       </div>
     </div>
     <div class="img-swiper pdlr20"
          v-if="is_display_img_box">
       <van-tabs v-model="activeTabName"
                 line-width="65px"
                 line-height="5px"
                 title-inactive-color="#666"
                 title-active-color="#2A314A"
                 class="img-swiper-tab"
                 @click="clickTab">
         <van-tab v-for="(item,index) in rank_pic_list"
                  :key="index"
                  :title="item.rank_name"
                  :name="index"></van-tab>
       </van-tabs>
       <div class="img-swiper-box">
         <!-- 小程序端用swiper -->
         <wx-swiper ref="imgSwiper" :style="{height:imgadvWxH}" :current="current" :circular="true" :show-indicators="showIndicators" @change="changeWxSwiper">
           <wx-swiper-item class="imgadv-wx-swiper-item" v-for="(item,index) in rank_pic_list" :key="index">
             <img @load="onImageLoad($event)" :src="item.privilege_pic || 'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg'" />
           </wx-swiper-item>
         </wx-swiper>
       </div>
     </div>

     <div class="item-block"
          v-if="need_show==1">
       <div class="item-title">
         <div class="title">升级进度</div>
         <div class="item-link">
           <a @click="linkTo(userIndexLink)">
             会员中心
             <!-- <svg-icon icon-class="icon_linkto"></svg-icon> -->
             <!-- TODO svg修改 -->
             <i class="icon-right"></i>
           </a>
         </div>
       </div>

       <div class="progress-ul">
         <div class="progress-item"
              v-if="rank_data.balance_percentage">
           <div class="title">当前交易额：</div>
           <div class="number fontGilroy">
             <span>{{mSymbol.name}}</span>
             {{rank_data.current_amount}}
           </div>
           <div class="tips">还差{{mSymbol.name}}{{rank_data.target_balance}}满足条件</div>
           <!-- <img src="/PublicMob/images/qnm1.png" /> -->
           <div class="next-level">升级为{{next_rank_name}}</div>
           <section class="progress-box">
             <div class="progress">
               <div class="progress-bar progress-bar-striped active"
                    :style="{width: rank_data.balance_percentage+'%'}"></div>
             </div>
             <span class="percentage"
                   :style="{left: rank_data.balance_percentage+'%'}">{{rank_data.balance_percentage}}%</span>
           </section>
         </div>
         <!-- <img src="/PublicMob/images/sb_bansd.png" class="line" /> -->

         <div class="progress-item"
              v-if="rank_data.count_percentage">
           <div class="title">当前交易次数：</div>
           <div class="number fontGilroy">{{rank_data.current_count}}</div>
           <div class="tips">还差{{rank_data.target_count}}次交易满足条件</div>
           <!-- <img src="/PublicMob/images/qnm2.png" /> -->
           <div class="next-level">升级为{{next_rank_name}}</div>
           <section class="progress-box">
             <div class="progress">
               <div class="progress-bar progress-bar-warning progress-bar-striped active"
                    :style="{width: rank_data.count_percentage+'%'}"></div>
             </div>
             <span class="percentage"
                   :style="{left: rank_data.count_percentage+'%'}">{{rank_data.count_percentage}}%</span>
           </section>
         </div>

         <div class="progress-item"
              v-if="rank_data.point_percentage">
           <div class="title">当前{{point_name}}：</div>
           <p class="number fontGilroy">{{rank_data.current_point}}</p>
           <p class="tips">还差{{rank_data.target_current_point}}{{point_name}}满足条件</p>
           <!-- <img src="/PublicMob/images/qnm3.png" /> -->
           <p class="next-level">升级为{{next_rank_name}}</p>
           <section class="progress-box">
             <div class="progress">
               <div class="progress-bar progress-bar-warning progress-bar-striped active"
                    :style="{width: rank_data.point_percentage+'%'}"></div>
             </div>
             <span class="percentage"
                   :style="{left: rank_data.point_percentage+'%'}">{{rank_data.point_percentage}}%</span>
           </section>
         </div>
       </div>
     </div>

     <div class="item-block custom-con" v-if="isShowContent" :style="modulePadding?'padding-top:'+modulePadding+'px;padding-bottom:'+modulePadding+'px;':'padding:0px;'" :class="['fulltext', !isPreview?'preview-img':'']">
       <div class="fulltext"
            v-if="content !=''"
            v-html="content"></div>

       <div class="default-con"
            v-else>
         <section class="member-info">
           <section class="default-img">
             <img src="https://img.wifenxiao.com/h5-wfx/images/user/memberBenifits/mg1.jpg"
                  width="60" />
           </section>
           <section class="default-txt">
             <p class="default-title">普通会员</p>
             <p>会员俱乐部内所有特权商品</p>
           </section>
         </section>
         <section class="grade-botttom">
           <p class="title">特权介绍</p>
           <p class="txt">会员俱乐部内所有特权商品，在30天最低价的基础上，针对不同会员等级[V1-V3][V4-V5][V6]会员，额外享受折上折</p>
           <div class="user_system_description_div">
             <p class="title">会员体系</p>
             <!-- 会员体系自定义 -->
             <p class="txt user_system_description"
                v-html="user_system_description"></p>
           </div>
         </section>
       </div>
     </div>
   </div>
    <!--  常俊海  第一期 定制  start  -->
    <div class="cjh-member-wrap" v-if="iscjh == '1'">
      <div class="cjh-member-main" ref="cjhMemberMain">
        <div class="cjh-headerM"  :style="{backgroundImage:'url('+privilege_setup[memberSwipeIndex].page_image+')'}">
          <wx-swiper @change="memberSwipeChange" style="height: 148px" :circular="true" indicator-color="#ebedf0" indicator-active-color="#FE5000" :indicator-dots="showIndicatorsMember">
            <wx-swiper-item v-for="(item, index) in privilege_setup" :key="index">
              <!--  头部信息  -->
              <div class="cjh-member-header" :style="{backgroundImage:'url('+item.background_image+')'}">
                <div class="cjh-header-left">
                  <img :src="userInfo.avatar" />
                </div>
                <div class="cjh-header-right">
                  <p>{{nickname}}</p>
                  <p>ID：{{pid}}</p>
                </div>
              </div>
            </wx-swiper-item>
          </wx-swiper>
          <!--   金刚区    -->
          <div class="cjh-kingkong-main clearfix">
            <div v-for="kingkong in privilege_setup[memberSwipeIndex].button_config" @click="openLink(kingkong.link)">
              <img class="cjh-memberImg" :src="kingkong.img">
              <p>{{kingkong.linkName}}</p>
            </div>
          </div>
        </div>
        <!--   自定义图片区域    -->
        <div class="cjh-customImg">
          <img class="cjh-memberImg" v-for="custom in privilege_setup[memberSwipeIndex].custom_config" :src="custom">
        </div>
        <!--        <van-swipe>-->
        <!--          <van-swipe-item v-for="(item, index) in privilege_setup" :key="index">-->
        <!--            &lt;!&ndash;  头部信息  &ndash;&gt;-->
        <!--            <div class="cjh-member-header" :style="{backgroundImage:'url('+item.background_image+')'}">-->
        <!--              <div class="cjh-header-left">-->
        <!--                <img :src="userInfo.avatar" />-->
        <!--              </div>-->
        <!--              <div class="cjh-header-right">-->
        <!--                <p>{{nickname}}</p>-->
        <!--                <p>ID：{{pid}}</p>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          &lt;!&ndash;   金刚区    &ndash;&gt;-->
        <!--            <div class="cjh-kingkong-main clearfix">-->
        <!--              <div v-for="kingkong in item.button_config">-->
        <!--                <a :href="kingkong.link? kingkong.link: 'javascript:;'">-->
        <!--                  <img class="cjh-memberImg" :src="kingkong.img">-->
        <!--                </a>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            &lt;!&ndash;   自定义图片区域    &ndash;&gt;-->
        <!--            <div class="cjh-customImg">-->
        <!--              <img class="cjh-memberImg" v-for="custom in item.custom_config" :src="custom">-->
        <!--            </div>-->
        <!--          </van-swipe-item>-->
        <!--        </van-swipe>-->
      </div>
    </div>
    <!--  常俊海  第一期 定制  end  -->
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { Tab, Tabs } from 'vant'
import { Swipe, SwipeItem } from 'vant'
import { getUserInfo } from '@/api/login'
Vue.use(Tab).use(Tabs)
Vue.use(Swipe).use(SwipeItem)
import { getMemberBenefits } from '@/api/user/member/memberApi'
import Store from '@/utils/store'
// import { openPage } from '@/utils/utils'
import { openPage } from "@/utils/utils"
import small from '@/smallapp/small'
// 全局注册
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)

export default Vue.extend({
  name: 'index',
  components: {},
  data() {
    return {
      current: 0,
      pid: '',
      ftitle_rank: '会员权益',
      is_display_img_box: '',
      rank_name: '',
      rank_pic_list: [
        /* {
          rank_name: '黄金会员',
          privilege_pic:
            'http://img.wifenxiao.com/16/79/6/2019-01/5c51488ae6ddf.jpg'
        },
        {
          rank_name: '铂金会员',
          privilege_pic: 'https://img.yzcdn.cn/vant/apple-1.jpg'
        } */
      ],
      activeTabName: 0,
      showIndicators: false,
      next_rank_name_sale: '',
      amount: 0,
      need_show: '', // 升级进度
      next_rank_name: '',
      point_name: '积分',
      rank_data: {
        balance_percentage: '',
        current_amount: '',
        target_balance: '',

        count_percentage: '',
        current_count: '',
        target_count: '',

        point_percentage: '',
        current_point: '',
        target_current_point: ''
      },
      content: '',
      isShowContent: false,
      isPreview: false,
      modulePadding: 0,
      user_system_description: '',
      userIndexLink: '',
      nickname: '',
      imgadvWxH: 0,
      iscjh: undefined, // 定制 常俊海  状态  1 定制
      privilege_setup: [], // 定制 常俊海数据
      userInfo: {}, // 个人信息
      memberSwipeIndex: 0, // 常俊海 定制 swipe 索引
      showIndicatorsMember: true,
      protection_remain_days: '', // 保级到期时间
      protection_remain_money: '', // 还需多少钱
      protection_trade_amount: '', // 已完成多少钱
      percentage: 0,
      protection_total_amount: ''
    }
  },
  methods: {
    // 会员数据
    getUserInfo() {
      getUserInfo().then(res => {
        if (res.status == 1) {
          this.userInfo = res.data
        }
      })
    },
    // 小程序swiper获取图片高度
    onImageLoad(event){
      const imgHeight = event.detail.height
      if (imgHeight > parseFloat(this.imgadvWxH)) {
        this.imgadvWxH = imgHeight + 'px'
      }
    },
    // TODO 小程序处理
    linkTo(link) {
      openPage(link,1)
    },
    openLink(link) {
        openPage(link)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
        this.pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'

      this.nickname = this.wxConfig.nickname
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getMemberBenefits().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.nickname = resData.nickname || '暂无昵称'
          if (resData.ftitle_rank) {
            this.ftitle_rank = resData.ftitle_rank || '会员权益'
              wx.setNavigationBarTitle({
                title: this.ftitle_rank
              })
          }
          // 保级
          this.protection_remain_days = resData.protection_remain_days || ''
          this.protection_remain_money = resData.protection_remain_money || ''
          this.protection_trade_amount = resData.protection_trade_amount || ''
          this.protection_total_amount = Number(resData.protection_remain_money) + Number(resData.protection_trade_amount)
          this.percentage = Math.floor((Number(resData.protection_trade_amount) / Number(this.protection_total_amount)) * 100)
          this.is_display_img_box = resData.is_display_img_box
          this.rank_name = resData.rank_name
          this.rank_pic_list = resData.rank_pic_list
          this.next_rank_name_sale = resData.next_rank_name_sale
          this.amount = resData.amount
          this.need_show = resData.need_show
          this.next_rank_name = resData.next_rank_name
          this.point_name = resData.point_name
          this.rank_data = resData.rank_data
          this.content = resData.content
          this.isPreview = resData.isPreview || false
          this.modulePadding = resData.modulePadding || 0
          this.iscjh = resData.cjh_member_privilege_setup // 定制 常俊海 状态  1 定制
          this.privilege_setup = resData.privilege_setup // 定制常俊海  数据
          this.$nextTick(() => {
            const that = this
            that.img_array = []
            // 获取所有可以预览的图片
            document.querySelectorAll('.fulltext.preview-img img').forEach(function(elem, ind) {
              that.img_array.push(elem.src)
            })
            // 给图片绑定点击事件
            document.querySelectorAll('.fulltext.preview-img img').forEach(function(elem, ind) {
              elem.onclick = function(e) {
                let _index = 0
                // 获取当前点击的是第几张图片
                that.img_array.forEach(function(_src, index) {
                  if (_src == e.target.src) {
                    _index = index
                  }
                })
                  // TODO 小程序图片预览
                  wx.previewImage({
                    current: e.target.src, //当前图片地址
                    urls: that.img_array,  //所有要预览的图片的地址集合数组形式
                  })
              }
            })
          })
          this.isShowContent = true
          // // console.log(this.content)
          this.user_system_description = resData.user_system_description
          this.userIndexLink = resData.user_index_url
          this.rechargeListUrl = resData.user_recharge_list_url
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 图片预览
    imgPreview(e) {
      if (this.isPreview) return
      if (e.target.nodeName == 'IMG') {
        ImagePreview({
          images: [e.target.currentSrc], // 图片地址列表
          startPosition: 0, // 当前显示的图片链接
          closeable: true,
          showIndex: false
        })
      }
    },
    // 点击tab
    clickTab(index, title) {
      // TODO 小程序处理
        this.current = index
    },
    // swiper滑动
    changeSwiper(index) {
      this.activeTabName = index
    },
    // c常俊海 定制 swipe 滑动
    memberSwipeChange(e) {
      // console.log(e.detail.current)
      this.memberSwipeIndex = e.detail.current
    },
    // TODO 小程序端wx滑动
    changeWxSwiper(event) {
      // console.log('event',event)
      this.activeTabName = event.detail.current
    }
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    // TODO jq换成原生
    document.querySelector('body').classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    // TODO jq换成原生
    document.querySelector('body').classList.remove('bg_white')
  },
  computed: {
    ...mapGetters(['wxConfig', 'mSymbol'])
  },
  watch: {
    wxConfig(val) {
      if (val.nickname) {
        this.nickname = val.nickname
      }
    }
  },
  created() {
    this.getUserInfo()
    this.init()
  }
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";

#app {
  background-color: #fff!important;
}
.app-wrapper {
  background: #fff!important;
}
.miniprogram-root {
  .wx-swiper {
    width: 100%;
    height: 710px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.member-benefits-container {
  img {
    max-width: 100%;
  }
  .header {
    padding: 25px;
    position: relative;
    height: 318px;
    padding: 40px 40px;
    background: url("https://img.wifenxiao.com/h5-wfx/images/user/memberBenifits/header_bg.png")
      center/cover no-repeat;
    .header-con {
      display: flex;
      position: relative;
      align-items: center;
      .header-left {
        width: 116px;
        height: 116px;
        margin-right: 20px;
      }
      img {
        display: block;
        width: 100%;
      }
      .level {
        margin-top: 20px;
        font-size: 36px;
        font-weight: bold;
        color: #fffefe;
        text-shadow: 0 2px 0 rgba(0, 0, 0, 0.09);
      }
      .member-id {
        margin-top: 10px;
        font-size: 24px;
        font-weight: 500;
        color: #888ea2;
        text-shadow: 0 2px 0 rgba(0, 0, 0, 0.09);
      }
    }
    .recharge-rank {
      position: absolute;
      width: 700px;
      bottom: 50px;
      p {
        line-height: 50px;
        font-size: 24px;
        font-weight: 500;
        color: #949ec0;
        text-indent: 40px;
        .num {
          color: #ffffff;
          margin: 0 3px;
        }
        i {
          color: #f8dd9f;
          margin: 0 3px;
        }
      }
      a {
        position: absolute;
        top: 0;
        right: 40px;
        padding:0 20px;
        // width: 146px;
        line-height: 50px;
        @include gradient(
          right,
          rgba(222, 173, 111, 1),
          rgba(251, 227, 165, 1)
        );
        box-shadow: 3px 5px 3px 0px rgba(15, 18, 29, 0.2),
          0px 2px 5px 0px rgba(255, 234, 201, 0.3);
        border-radius: 25px;
        text-align: center;
        font-size: 22px;
        color: #262d46;
      }
    }
    .member-type {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 20px;
      line-height: 48px;
      @include gradient(left, rgba(100, 110, 144, 1), rgba(146, 155, 188, 1));
      border-radius: 0px 25px 0px 25px;
      font-size: 24px;
      color: #28304d;
    }
  }
  .item-block {
    margin: 20px 25px 0;
    .item-title {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      padding-bottom: 20px;
      .title {
        position: relative;
        font-size: 32px;
        color: #333333;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.2) 80%,
            rgba(255, 255, 255, 0) 100%
          );
        }
      }
      .item-link {
        font-size: 28px;
        color: #666666;
        display: flex;
        align-items: center;
      }
    }
  }
  .progress-ul {
    // padding-bottom: 50px;
  }
  .progress-item {
    position: relative;
    margin-bottom: 50px;
    width: 700px;
    height: 311px;
    padding: 30px;
    @include gradient(right, rgba(255, 249, 242, 1), rgba(252, 243, 232, 1));
    border-radius: 25px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      font-size: 28px;
      line-height: 50px;
    }
    .number {
      padding: 16px 0;
      font-size: 40px;
      color: #deae6f;
      font-weight: bold;
      span {
        font-size: 24px;
      }
    }
    .tips {
      font-size: 26px;
      color: #deae6f;
    }
    .next-level {
      position: absolute;
      top: 17px;
      right: 0;
      width: 156px;
      height: 46px;
      line-height: 46px;
      padding-left: 30px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/user/memberBenifits/next_level.png")
        center/cover no-repeat;
      color: #262d46;
    }
    .progress-box {
      width: 640px;
      position: absolute;
      bottom: 56px;
      height: 6px;
      .progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        border-radius: 6px;
        overflow: hidden;
        background: #ecdcca;
        box-shadow: inset 0 3px 4px rgba(147, 147, 147, 0.23);
      }
      .progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        height: 6px;
        @include gradient(left, rgba(222, 173, 111, 1), rgba(251, 227, 165, 1));
      }
      .percentage {
        position: absolute;
        left: 0;
        bottom: 15px;
        width: 70px;
        line-height: 38px;
        text-align: center;
        color: #262d46;
        background: url(https://img.wifenxiao.com/h5-wfx/images/user/memberBenifits/progress_icon.png)
          center/100% 100% no-repeat;
        margin-left: -35px;
        &:after {
          content: "";
          position: absolute;
          width: 12px;
          height: 12px;
          border-radius: 12px;
          background: #e1b375;
          bottom: -18px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .custom-con {
    margin: 10px 25px 0;
    .default-con {
      .member-info {
        display: flex;
        padding-bottom: 30px;
        border-bottom: 1px solid #dfdfdf;
      }
      .default-img {
        overflow: hidden;
        width: 120px;
        height: 120px;
        border-radius: 8px;
        border: 2px solid #cfa97c;
        img {
          display: block;
          width: 100%;
        }
      }
      .default-txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
        .default-title {
          margin-bottom: 16px;
          font-size: 28px;
        }
      }
      .grade-botttom {
        padding-top: 20px;
        .title {
          padding-top: 6px;
          font-size: 28px;
          line-height: 1.5;
        }
        .txt {
          line-height: 1.5;
          color: #999;
        }
      }
    }
  }
}
</style>
<style lang="scss">
@import "../../../../styles/mixin";
.img-swiper {
  .img-swiper-tab {
    margin-bottom: 34px;
  }
  // margin-top:-10px;
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border: 0;
  }
  .van-tabs--line {
    .van-tabs__wrap {
      height: 80px;
    }
    .van-tabs__nav {
      background: transparent;
      .van-tab {
        font-size: 28px;
        line-height: 80px;
      }
      .van-tab--active {
        font-size: 32px;
        font-weight: bold;
      }
      .van-tabs__line {
        border-radius: 0 !important;
        bottom: 53px !important;
        @include gradient(
          right,
          RGBA(224, 177, 118, 1),
          RGBA(224, 177, 118, 0.2)
        );
      }
    }
  }
  .img-swiper-box {
    padding: 10px 0;
    background: #fff;
    border-radius: 8px;
    img {
      display: block;
    }
  }
}
/*  常俊海定制 start*/
.cjh-headerM{
  background-size: 100% 100%;
  padding: 25px 0 40px 0;


}
.cjh-member-wrap{
  width: 100%;
  .cjh-member-main{
    width: 100%;
    /*padding-top: 25px;*/
    overflow: hidden;
  }
  .cjh-member-header{
    width: 686px;
    height: 296px;
    /*background-color: red;*/
    overflow: hidden;
    margin: auto;
    background-size: 100% 100%;
    .cjh-header-left{
      width: 96px;
      height: 96px;
      margin: 32px 40px 0 32px;
      float: left;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .cjh-header-right{
      float: left;
      margin-top: 36px;
      p:nth-child(1){
        font-size: 32px;
        font-weight: 500;
        color: #FBD791;
      }
      p:nth-child(2){
        font-size: 28px;
        font-weight: 400;
        color: #FBD791;
        margin-top: 6px;
      }
    }
    .cjh-memberImg{
      width: 100px;
      height: 112px;
      float: right;
      margin: 36px 44px;
    }
  }
  .cjh-kingkong-main{
    width: 686px;
    margin: 60px auto 0;
    div{
      width: 128px;
      margin: 0 0 20px 57px;
      float: left;
      text-align: center;
      img{
        width: 100%;
        height: 128px;
        border-radius: 50%;
      }
      p{
        height: 26px;
        margin-top: 5px;
        color: black;
        font-size: 20px;
      }
    }
    div:nth-child(1){
      margin-left: 0;
    }
    div:nth-child(5){
      margin-left: 0;
    }
  }
  .cjh-customImg{
    width: 100%;
    /*margin-top: 60px;*/
    img{
      width: 100%;
      /*height: 400px;*/
    }
  }
}
.relegation {
  color: #fff;
  font-size: 24px;
  .total-relegation {
    font-size: 32px;
  }
}
.progress-relegation {
  position: relative;
  top: 20px;
  .progress-keep {
    width: 100%;
    height: 8px;
    background: #ccc;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    .progress-bar {
      position: absolute;
      top: 0;
      bottom: 0;
      background: #fff;
      left: 0;
    }
  }
}
</style>
